<template>
  <div class="item_list">
    <van-tabs
      v-model="navActive"
      @change="tabchange"
      line-width="0"
      title-active-color="#EE3F00"
      title-inactive-color="#111111"
      background="#F8F8F8"
      :swipeable="true"
      :duration="0.1"
      :lazy-render="false"
      animated
    >
      <van-tab v-for="(nav, index) in navList" :title="nav.name" :key="index" style="background-color:#fff;">
        <sub-list :category_id = nav.id />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {goodsCategory } from '@/api/api';
import {Tab, Tabs} from 'vant';
import subList from './sublist';

export default {
  name: 'Item-list',
  props: {
    itemClass: {
      type: [String, Number]
    }
  },

  data() {
    return {
      categoryId: this.itemClass,
      navList: [],
      goodsList: [],
      currentCategory: {},
      navActive: 0,
      isFirst:1,
    };
  },

  created() {
    this.init();
  },

  watch:{
      '$route'() {   
        if(this.$route.query.itemClass != null && this.$route.query.itemClass != undefined){
          this.categoryId = this.$route.query.itemClass;
          this.navList = [];
          this.init();
        }
          // if(this.$route.query.itemClass != null && this.$route.query.itemClass != undefined){
          //   if(this.navActive != 0){
          //     this.categoryId = this.navList[this.navActive].id;
          //   }else{
          //     this.categoryId = this.$route.query.itemClass;
          //     for (let i = 0; i < this.navList.length; i++) {
          //       if (this.navList[i].id == this.categoryId) {
          //         this.navActive = i;
          //         break;
          //       }
          //     }
          //   }
          // }
          
      }
  },

  beforeRouteLeave(to, from, next) { // 仅适用于本页面不作为H5着陆页的情况
    if(to.name != 'detail'){
      this.navActive = 0;
    }
    next();
  },

  methods: {
    init() {
      goodsCategory({ id: this.categoryId }).then(res => {
        this.navList = res.data.data.brotherCategory;
        this.currentCategory = res.data.data.currentCategory;
       // console.log('============='+JSON.stringify(this.navList));
        // 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
        if (res.data.data.parentCategory.id == this.categoryId) {
          this.categoryId = res.data.data.currentCategory.id;
        }

        for (let i = 0; i < this.navList.length; i++) {
          if (this.navList[i].id == this.categoryId) {
            this.navActive = i;
            break;
          }
        }
        this.isFirst = 0;
      });
      // firstCategory().then(res => {
      //   this.navList = res.data.data;
      //   if(this.isFirst == 1){
      //     for (let i = 0; i < this.navList.length; i++) {
      //       if (this.navList[i].id == this.categoryId) {
      //         this.navActive = i;
      //         break;
      //       }
      //     }
      //     this.isFirst = 0;
      //   }
      // });
    },
    tabchange(event){
      this.navActive = event;
    },
  },

  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [subList.name]: subList
  }
};
</script>

<style lang="scss" scoped>
.view-router{
    padding-bottom: 0;
} 

/deep/ .van-tabs__nav--line {
  position: fixed;
  z-index: 100;
  padding-bottom: 0;
  height: 44px;
  width: 100%;
}
.van-tabs__nav {
  margin: 0;
}
</style>
